<template>
  <div>
    <div>
      <el-button type="primary" @click="createDocument('docx')">新建world正文</el-button>
      <el-button type="primary" @click="createDocument('xlsx')" class="margin-left">新建excel正文</el-button>
      <el-button type="primary" @click="createDocument('pptx')" class="margin-left">新建ppt正文</el-button>
    </div>
    <div class="margin-top">
      <el-upload ref="upload"
                 :action="action"
                 v-model="ossModelFiles"
                 :limit="1"
                 :onExceed="onExceed"
                 :before-upload="beforeUpload"
                 :http-request="updateFile"
                 :on-success="uploadSuccess"
                 :accept="accept"
                 :show-file-list="true"
                 :auto-upload="true">
        <template #trigger>
          <el-button type="primary">打开已有文件</el-button>
        </template>

        <template #tip>
          <div class="el-upload__tip text-grey">
            {{ tipText }}
          </div>
        </template>
      </el-upload>

    </div>
  </div>
</template>
<script>
import {genFileId} from "element-plus";
import startFileTools from "@/mixins/startFileTools";
import {getAsVal} from "components/avue/utils/util";
import startOfficeApi from "@/api/start/startOfficeApi";
import {DIC_HTTP_PROPS} from "components/avue/global/variable";
import {getUploadConfig} from "@/config/env";

const tempConfig = getUploadConfig();
export default {
  name: "startNewOffice",
  props: {
    emptyText: {
      type: String,
      default: "无文档"
    },

    accept: {
      type: String,
      default: ".doc,.docx,.xls,.xlsx,.ppt,.pptx"
    },
    tip: {
      type: String,
      default: null,
    },
    fileSize: {
      type: [Number, String],
      default: "10MB"
    },
  },
  computed: {
    tipText() {
      if (this.tip && this.length > 0) {
        return this.tip
      }
      return "请选择小于" + startFileTools.formatFileSize(this.fileSize) + "的" + this.accept + "文件"
    },
    action() {
      return tempConfig.action
    },
    updatePropsHttp() {
      return Object.assign({}, DIC_HTTP_PROPS, tempConfig.propsHttp)
    },
    fileByteSize() {
      return startFileTools.fileSizeToBytes(this.fileSize)
    },

  },
  data() {
    return {

      ossModelFiles: [],
    }
  },
  methods: {
    onExceed(files) {
      this.$refs.upload.clearFiles();
      const file = files[0]
      file.uid = genFileId()
      this.$refs.upload.handleStart(file)
    },
    beforeUpload(rawFile) {
      if (this.fileSize === null || this.fileSize === undefined || this.fileSize < 0) {
        return true;
      }
      if (rawFile.size > this.fileByteSize) {
        this.$message.error("文件太大了，请上传小于" + startFileTools.formatFileSize(this.fileSize) + "的" + this.accept + "文件")
        return false;
      }
      return true;
    },
    updateFile(val) {
      let param = new FormData();
      param.append(this.updatePropsHttp.fileName, val.file);
      return this.$axios.post(val.action, param)
    },
    uploadSuccess(response, uploadFile, uploadFiles) {
      let res = getAsVal(response.data, this.updatePropsHttp.res);
      this.$emit("openDocument", res.id)
      this.$refs.upload.clearFiles()
    },
    createDocument(fileExt) {
      let data = {};
      data.fileExt = fileExt;
      startOfficeApi.createDocument(data).then(res => {
        let ossId = res.data.data.ossId
        this.$emit("openDocument", ossId)
      })
    },
  }
}
</script>
<style scoped>

</style>
